<template>
  <div class="myheader">
    <div class="flex" style=" justify-content: space-around;">
      <div class="flex">
        <img class="show" src="../assets/family.png" style="border-radius: 10px;cursor: pointer;" height="40"
             @click="toIndex"/>
        <span class="font">{{ headerName }}</span>
      </div>
      <div class="flex">
        <el-dropdown style="line-height: 0" v-if="islogin">
          <el-avatar :src="usermsg.img" style="cursor: pointer;"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="logOut">退出登录</el-dropdown-item>
            <el-dropdown-item @click.native.prevent="findId">查找家庭号</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown style="line-height: 0" v-else>
          <el-avatar style="cursor: pointer;"> user</el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="click">登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-dialog
        title="家庭号"
        :modal=modal
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <span style="margin-left: 30%;font-size: large;font-weight: bolder">家庭号： {{
          familyNumber
        }}</span>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Header",
  data: function () {
    return {
      input: "",
      islogin: false,
      usermsg: {},
      dd: null,
      familyNumber: null,
      modal: false,
      centerDialogVisible: false
    }
  },
  props: [
    "headerName"
  ],
  mounted() {
    let token = window.localStorage.getItem('myToken');
    if (token == null) {
      this.islogin = false
    } else {
      this.islogin = true
      this.dd = window.setInterval(this.reGetToken, 100000)
      this.getHimSelf().then(async res => {
        await this.getimg(res.headPortraitId).then(data => {
          res.img = data
        })
        await this.getFamily(res.fid).then(data => {
          this.familyNumber = data.familyNumber
        })
        this.usermsg = res
      })
      this.islogin = true
      this.checkTomorrow().then(data => {
        if (data.isReady) {
          this.open3()
        }
      })
    }
  },
  methods: {
    getFamily(id) {
      return new Promise(resolve => {
        this.$http.get("/user/getByFid/" + id).then(data => {
          // console.log(data)
          resolve(data.data)
        })
      })
    },
    open3() {
      this.$notify.info({
        title: '疫苗提醒',
        message: '您好，您的宝宝在明日有疫苗接种任务',
        duration: 0
      });
    },
    checkTomorrow() {
      return new Promise(resolve => {
        this.$http.get("/vaccines/checkIsReady").then(data => {
          resolve(data.data)
        })
      })
    },
    toIndex() {
      this.$router.push("/login")
    },
    click() {
      this.$router.push("/login")
    },
    reGetToken() {
      this.$http.get('/login/reGetToken').then(data => {
        if (data.code == 400) {
          window.localStorage.removeItem("myToken")
          this.$message.warning("登录状态过期")
          this.$router.push("/login")
          return
        }
        this.$store.commit("setToken", data.data.token)
      })
    },
    getHimSelf() {
      return new Promise(resolve => {
        this.$http.get("/login/getUserHimself").then(res => {
          resolve(res.data)
        })
      })
    },
    getimg(id) {
      return new Promise(resolve => {
        this.$http({
          url: "/file/img/" + id,
          method: "get",
          responseType: "arraybuffer",
        }).then(res => {
          let bytes = new Uint8Array(res);
          let storeData = "";
          let len = bytes.byteLength;
          for (let i = 0; i < len; i++) {
            storeData += String.fromCharCode(bytes[i]);
          }
          let database = "data:image/png;base64," + window.btoa(storeData);
          resolve(database);
        });
      })
    },
    toggleMenu() {
      this.isShow = !this.isShow
      const route = document.getElementsByClassName('route-content')[0]
      if (this.isShow) {
        route.classList.add('route-filter')
      } else {
        route.classList.remove('route-filter')
      }
    },
    tologin() {
      this.$router.push("/login")
    },
    async logOut() {
      window.localStorage.removeItem("myToken")
      this.$message.success("退出登录成功")
      this.$router.push("/login")
    },
    findId() {
      this.centerDialogVisible = true
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
}


.font {
  margin-left: 20px;
  font-size: larger;
  font-family: 宋体;
  font-weight: bold;
  color: #4dc9c9;
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.myheader {
  position: fixed;
  line-height: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #6a6060;
  z-index: 200;
  /*border-bottom: 1px dashed #f5f2f2;*/
}
</style>